::-webkit-scrollbar{
	width:10px;
	height: 5px;
	background-color: transparent;
	border-radius: 10px;
  }
::-webkit-scrollbar-thumb{
	background-color: #76b5ec;
	border-radius: 10px;
	height: 5px;
}

body{
	scrollbar-color: transparent transparent;
	scrollbar-track-color: transparent;
	-ms-scrollbar-track-color: transparent;
	background: url(../img/bg.png) no-repeat top center;
	background-size: cover;
	overflow-x: hidden;
}
.header{
	width: 100%;
	height: 80px;
	background: url(../img/bg3.png) no-repeat bottom center;
	position: relative;
	.title{
		text-align: center;
		color: #fff;
		line-height: 80px;
		font-size: 30px;
		font-weight: bold;
		i{
			font-style: italic;
		}
	}
	.time{
		position: absolute;
		top: 20px;
		left: 24px;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
	.full{
		position: absolute;
		top: 20px;
		right: 50px;
		color: #76b5ec;
		font-size: 18px;
		font-weight: bold;
		padding: 3px 10px;
		border: 1px solid #76b5ec;
		border-radius: 5px;
		cursor: pointer;
	}
}
.main{
	padding: 1.5%;
	.title{
		width: 100%;
		height: 44px;
		text-align: center;
		line-height: 44px;
		color: #fff;
		font-size:20px;
		font-weight: bold;
		background: url(../img/titile.png) no-repeat center;
		margin-top: 18px;
	}
	.box1{
		float: left;
		width: 27%;
		height: 525px;
		box-sizing: border-box;		
		background: url(../img/bg4.png) no-repeat center;
		background-size: 100% 100%;
		margin-top: -60px;
		.content{
			margin: 10px auto 0;
			padding: 5px 0 5px 28px;
			height: 420px;
			overflow: auto;
			ul{
				li{
					float: left;
					width: 205px;
					height: 68px;
					background: url(../img/bg2.png) no-repeat center;
					background-size: 100%;
					color: #c9e5ff;
					line-height: 60px;
					font-size: 20px;
					padding-left: 65px;
					box-sizing: border-box;		
					margin-bottom: 20px;
					&:nth-child(odd){
						margin-right: 15px;
					}
					&:last-child{
						margin-bottom: 0px;
					}
					span{
						display: inline-block;
						width: 110px;
						text-align: center;	
						cursor: pointer;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					&.on,&:hover{
						background: url(../img/bg1.png) no-repeat center;
						color: #2b5e94;
					}
				}
			}
		}
	}
	.box2{		
		float: left;
		width:42%;
		height: 443px;		
		margin: 2% 2% 0;
		background-size: 100%;
		margin-top: -20px;
		position: relative;
		.wrap{
			position: absolute;
			top: -20px;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 525px;
			background: url(../img/bg6.png) no-repeat bottom center;
			background-size: auto 100%;
			animation: myzhuan 12s infinite linear;
			-webkit-animation: myzhuan 12s infinite linear;
			-moz-animation: myzhuan 12s infinite linear;			
		}		
		.inner{
			position: absolute;
			top: 30px;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: url(../img/bg5.png) no-repeat center;
		}
	}
	.box3{
		float: left;
		width: 27%;
		height: 525px;
		background: url(../img/bg4.png) no-repeat center;
		background-size: 100% 100%;
		margin-top: -60px;
		box-sizing: border-box;		
		.content{
			margin: 15px auto;		
			.head{
				width: 100%;
				height: 42px;
				box-sizing: border-box;
				position: relative;
				padding: 6px 20px;
				p{
					height: 30px;
					background: rgba(158,210,255,0.5);
					color: #c9e5ff;
					font-size: 17px;
					line-height: 30px;
					span{
						display: inline-block;
						box-sizing: border-box;
						&:nth-child(1){
							width: 220px;
							padding-left: 40px;
						}
						&:nth-child(2){							
							width: 130px;
						}
					}
				}
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: url(../img/line2.png) no-repeat top center;
				}
				&::after{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: url(../img/line1.png) no-repeat bottom center;
				}
			}
			ul{
				height: 370px;
				overflow: auto;
				padding: 0px 20px;
				li{
					margin-top: 10px;
					width: 100%;
					font-size: 15px;
					color: #fff;
					line-height: 30px;
					height: 30px;
					box-sizing: border-box;
					background: rgba(158,210,255,0.15);
					cursor: pointer;
					&:hover{
						background: rgba(158,210,255,0.5);
					}
					span{
						vertical-align: middle;
						display: inline-block;
						box-sizing: border-box;
						&:nth-child(1){
							width: 32px;
							font-size: 23px;
							background: #d73939;
							text-align: center;
							vertical-align: top;
						}
						&:nth-child(2){
							width: 190px;
							padding-left: 5px;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						&:nth-child(3){
							width: 120px;
						}
						&:nth-child(4){
							color: #afdaff;
						}
					}
				}
			}
		}
	}
	.box4{
		float: left;
		width: 72%;
		height: 434px;
		background: url(../img/bg7.png) no-repeat center;
		background-size: 100% 100%;
		margin-top: 1%;
		.content{
			padding: 24px 24px 0;
			height: 330px;
			overflow: auto;
			ul{
				li{
					margin-bottom: 30px;
					.left{
						float: left;
						p{
							width: 82px;
							height: 100px;
							background: #4884c3;
							border-radius: 5px;
							box-sizing: border-box;
							text-align: center;
							padding-top: 40px;
							position: relative;
							margin-top: 15px;
							margin-right: 20px;
							span{
								width: 22px;
								height: 30px;
								position: absolute;
								top: 0;
								left: 0;
								font-size: 20px;
								color: #fff;
								font-weight: bold;
								background: #6fb6ff;
								border-radius: 5px 0 5px 0;
							}							
						}
					}	
					.right{
						float: left;
						.list{
							margin-bottom: 24px;
							&:last-child{
								margin-bottom: 0;
							}
							p{
								float: left;
								width: 34px;
								height: 50px;
								box-sizing: border-box;
								text-align: center;
								font-size: 0;
								margin-right: 4px;
								background: url(../img/bg9.png) no-repeat center;
								span{
									display: inline-block;
									height: 4px;
									width: 100%;
									margin-bottom: 2px;
									span{
										float: left;
										width: 16px;
										background: #14d08b;
										border-radius: 4px 0 0 0 ;
										&:last-child{
											float: right;
											border-radius: 0 4px 0 0 ;
										}
										&.on{
											background: #d73939;
										}
									}
								}
								&:last-child{
									margin-right: 0;
								}
								a{
									display: inline-block;
									position: relative; 
									&:last-of-type{
										margin-left: 2px;
									}
									&:hover{
										span{
											display: block;
										}
									}
									span{
										display: none;
										position: absolute;
										z-index: 999;
										width: 124px;
										height: auto;
										padding: 10px;
										box-sizing: border-box;
										background: #62adfd;
										font-size: 12px;
										color: #fff;
										border-radius: 5px;
										top: 110%;
										left: 50%;
										transform: translateX(-50%);
										&::before{
											content: "";
											position: absolute;
											top: -15px;
											left: 50%;
											transform: translateX(-50%);
											width: 0; 
											height: 0;
											border-width: 8px;
											border-style: solid;
											border-color:transparent transparent #62adfd transparent;
										}
									}
								}
								&.none{
									background: url(../img/bg11.png) no-repeat center;
								}	
								
							}
						}
					}
				}
			}
		}
	}
	.box5{
		float: left;
		width: 27%;
		height: 434px;
		background: url(../img/bg8.png) no-repeat center;
		background-size: 100% 100%;
		margin-top: 1%;
		margin-left: 1%;
		.content{
			margin: 15px auto;		
			.head{
				width: 100%;
				height: 42px;
				box-sizing: border-box;
				position: relative;
				padding: 6px 20px;
				p{
					height: 30px;
					background: rgba(158,210,255,0.5);
					color: #c9e5ff;
					font-size: 17px;
					line-height: 30px;
					span{
						display: inline-block;
						box-sizing: border-box;
						&:nth-child(1){
							width: 220px;
							padding-left: 40px;
						}
						&:nth-child(2){							
							width: 130px;
						}
					}
				}
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: url(../img/line2.png) no-repeat top center;
				}
				&::after{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: url(../img/line1.png) no-repeat bottom center;
				}
			}
			ul{
				height: 290px;
				overflow: auto;
				padding: 0px 20px;
				li{
					margin-top: 10px;
					width: 100%;
					font-size: 15px;
					color: #fff;
					line-height: 30px;
					height: 30px;
					box-sizing: border-box;
					background: rgba(158,210,255,0.15);
					cursor: pointer;
					&:hover{
						background: rgba(158,210,255,0.5);
					}
					span{
						vertical-align: middle;
						display: inline-block;
						box-sizing: border-box;
						&:nth-child(1){
							width: 32px;
							font-size: 23px;
							background: #10cb86;
							text-align: center;							
							vertical-align: top;
						}
						&:nth-child(2){
							width: 190px;
							padding-left: 5px;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						&:nth-child(3){
							width: 120px;
						}
						&:nth-child(4){
							color: #afdaff;
						}
					}
				}
			}
		}
	}
}
 @media screen and (max-width: 1680px) {
	 .header{
	 	transform-origin: 0 0;
	 	transform: scale(0.88);
	 	width: 111%;
	 }
 	.main{		
		transform-origin: 0 0;
		transform: scale(0.88);
		width: 111%;
	}
	
 }
 @media screen and (max-width: 1600px) {
	 .header{
		transform-origin: 0 0;
		transform: scale(0.84);
		width: 120%; 
	 }
 	.main{		
 		transform-origin: 0 0;
 		transform: scale(0.84);
 		width: 116%;
 	}
 	
 }
 @media screen and (max-width: 1440px) {
 	 .header{
 		transform-origin: 0 0;
 		transform: scale(0.76);
 		width: 133%; 
 	 }
 	.main{		
 		transform-origin: 0 0;
 		transform: scale(0.76);
 		width: 129%;
 	}
 	
 }
 @media screen and (max-width: 1400px) {
 	 .header{
 		transform-origin: 0 0;
 		transform: scale(0.74);
 		width: 138%; 
 	 }
 	.main{		
 		transform-origin: 0 0;
 		transform: scale(0.74);
 		width: 133%;
 	}
 	
 }
 @media screen and (max-width: 1366px) {
	 .header{
 		transform-origin: 0 0;
 		transform: scale(0.72);
 		width: 140%; 
 	 }
 	.main{		
 		transform-origin: 0 0;
 		transform: scale(0.72);
 		width: 136%;
 	}
 	
 }
 @keyframes myzhuan {
   0% { transform: rotate(0); }
   100% { transform: rotate(360deg); }
 }
 
 @-moz-keyframes myzhuan {
   0% { -moz-transform: rotate(0); }
   100% { -moz-transform: rotate(360deg); }
 }
 
 @-webkit-keyframes myzhuan {
   0% { -webkit-transform: rotate(0); }
   100% { -webkit-transform: rotate(360deg); }
 }
 
 .tan{
	 display: none;
	 position: fixed;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 background: rgba(0,0,0,0.5);
	 .inner{
		 position: absolute;
		 top: 50%;
		 left: 50%;
		 transform: translate(-50%,-50%);
		 width: 400px;
		 height: 226px;
		 background: #62adfd;
		 border-radius: 10px;
		 padding: 50px;
		 box-sizing: border-box;
		 p{
			 float: left;
			 width: 128px;
			 height: 128px;
			 background: #276db8;
			 border-radius: 10px;
			 text-align: center;
			 padding-top: 30px;
			 box-sizing: border-box;			
			 img{
				 display: block;
				 margin: 0 auto;
				  margin-bottom: 15px;
			 }
			 &:last-child{
				 margin-left: 40px;
			 }
			 select{
				 width: 74px;
				 height: 28px;
				 border: 1px solid #fff;
				 border-radius: 3px;
				 background: transparent;
				 color: #fff;
				 outline: none;
				 font-size: 18px;
				 option{
					 color: #333;
				 }
			 }
			 span{
				 color: #fff;
				 font-size: 18px;
				 line-height: 26px;
				 cursor: pointer;
			 }
		 }
	 }
 }
 .mr2{
	 margin-right: 2px;
 }